<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>聚类显示</title>
    <script include="jquery,papaparse" src="./static/libs/include-lib-local.js"></script>
    <script include="" src="./static/libs/include-mapboxgl-local.js"></script>
    <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map">
        <div id="mouse-position">
        </div>
    </div>
    <script>
        var tiandituKey = 'f5347cab4b28410a6e8ba5143e3d5a35';
        var map = new mapboxgl.Map({
            container: 'map',
            crs: 'EPSG:4326',
            maxBounds: [[-180, -90], [180, 90]],
            style: {
                version: 8,
                sources: {
                    'tianditu-3857-image': {
                        //来源类型为栅格瓦片
                        type: 'raster',
                        tiles: [
                            //来源请求地址，请求天地图提供的全球矢量地图WMTS服务
                            'http://t' +
                            Math.round(Math.random() * 7) +
                            '.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0' +
                            '&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
                            '&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}' +
                            '&tk=' +
                            tiandituKey
                        ],
                        //栅格瓦片的分辨率
                        tileSize: 256
                    }
                },
                layers: [
                    {
                        id: 'tianditu-3857-image',
                        type: 'raster',
                        source: 'tianditu-3857-image',
                        minzoom: 0,
                        maxzoom: 22
                    }
                ],
                glyphs: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/fonts/{fontstack}/{range}.pbf'
            },
            center: [108.95, 34.25],
            zoom: 3
        });
        //注册鼠标移动事件
        map.on('mousemove', function (e) {
            //经纬度坐标转web墨卡托
            const earthRad = 6378137.0;
            const x = e.lngLat.lng * Math.PI / 180 * earthRad;
            const a = e.lngLat.lat * Math.PI / 180;
            const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
            document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
        });
        map.on('load', () => {
            $.get('../../static/data/geojson/chinaEarthquake.csv', function (response) {
                var dataObj = Papa.parse(response, {
                    skipEmptyLines: true,
                    header: true
                });

                var data = dataObj.data;

                var geojson = {
                    type: 'FeatureCollection',
                    features: []
                };

                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    var date = new Date(item.date);
                    var year = date.getFullYear();

                    //2w+地震数据
                    if (year > 2000 && year < 2015) {
                        var feature = {
                            type: 'feature',
                            geometry: {
                                type: 'Point',
                                coordinates: []
                            },
                            properties: {
                                value: parseFloat(item.level)
                            }
                        };
                        feature.geometry.coordinates = [parseFloat(item.X), parseFloat(item.Y)];

                        geojson.features.push(feature);
                    }
                }
                addCluster(geojson);
            });
        });

        function addCluster(geojson) {
            // map.add
            map.addSource('earthquakes', {
                type: 'geojson',
                data: geojson,
                cluster: true,
                clusterMaxZoom: 14, // 聚合最大级别
                clusterRadius: 50 // 聚合半径
            });

            map.addLayer({
                id: 'clusters',
                type: 'circle',
                source: 'earthquakes',
                filter: ['has', 'point_count'],
                paint: {
                    'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 100, '#f1f075', 750, '#f28cb1'],
                    'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],
                    'circle-stroke-color': '#FFFFFF',
                    'circle-stroke-width': 5
                }
            });

            map.addLayer({
                id: 'cluster-count',
                type: 'symbol',
                source: 'earthquakes',
                filter: ['has', 'point_count'],
                layout: {
                    'text-field': '{point_count_abbreviated}',
                    'text-font': ['宋体', '宋体'],
                    'text-size': 12
                }
            });

            map.addLayer({
                id: 'unclustered-point',
                type: 'circle',
                source: 'earthquakes',
                filter: ['!', ['has', 'point_count']],
                paint: {
                    'circle-color': '#11b4da',
                    'circle-radius': 4,
                    'circle-stroke-width': 1,
                    'circle-stroke-color': '#fff'
                }
            });
        }
    </script>
</body>

</html>